import React, { PureComponent } from "react"
import { createPortal } from "react-dom"
// Protal一般用来写弹窗
// 渲染函数
const fn = function (props) {
  const { isShow, title, content } = props
  return (
    <div
      style={{
        display: isShow ? "block" : "none",
        position: "fixed",
        top: "50%",
        left: "50%",
        transform: "translate(-50%, -50%)",
        width: "200px",
        background: "#ccc"
      }}
    >
      <h3 style={{ border: "1px solid #333" }}>{title}</h3>
      <div style={{ padding: "30px", textAlign: "center" }}>{content}</div>
    </div>
  )
}

export default class Portal extends PureComponent {
  constructor(props) {
    super(props)
  }

  render() {
    const props = this.props
    return createPortal(fn(props), document.getElementById("react-model"))
  }
}
